<template>
  <div class="my-likes-page">
    <van-nav-bar
      title="我的点赞"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="likes-tabs">
      <van-tabs v-model:active="activeTab" animated swipeable>
        <van-tab title="文章">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div class="like-list" v-if="likedArticles.length > 0">
                <div 
                  v-for="(article, index) in likedArticles" 
                  :key="article.id" 
                  class="like-item"
                  @click="viewArticle(article.id)"
                >
                  <div class="item-cover" v-if="article.cover">
                    <img :src="article.cover" alt="封面">
                  </div>
                  <div class="item-content">
                    <div class="item-title">{{ article.title }}</div>
                    <div class="item-summary">{{ article.summary }}</div>
                    <div class="item-info">
                      <div class="author-info">
                        <img :src="article.author.avatar" :alt="article.author.name" class="author-avatar">
                        <span>{{ article.author.name }}</span>
                      </div>
                      <div class="stats-info">
                        <span class="info-item">
                          <van-icon name="eye-o" />
                          <span>{{ article.views }}</span>
                        </span>
                        <span class="info-item">
                          <van-icon name="like" color="#ee0a24" />
                          <span>{{ article.likes }}</span>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <van-empty v-else description="暂无点赞的文章" />
            </van-list>
          </van-pull-refresh>
        </van-tab>
        
        <van-tab title="评论">
          <div class="like-list" v-if="likedComments.length > 0">
            <div 
              v-for="(comment, index) in likedComments" 
              :key="comment.id" 
              class="like-item comment-item"
              @click="viewComment(comment.articleId, comment.id)"
            >
              <div class="item-content">
                <div class="item-info">
                  <div class="author-info">
                    <img :src="comment.user.avatar" :alt="comment.user.name" class="author-avatar">
                    <span>{{ comment.user.name }}</span>
                  </div>
                  <div class="comment-time">{{ formatDate(comment.time) }}</div>
                </div>
                <div class="item-comment">{{ comment.content }}</div>
                <div class="item-article-title">文章：{{ comment.articleTitle }}</div>
              </div>
            </div>
          </div>
          <van-empty v-else description="暂无点赞的评论" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const activeTab = ref(0)
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)
const likedArticles = ref([])
const likedComments = ref([])
const currentPage = ref(1)
const pageSize = ref(10)

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 下拉刷新
const onRefresh = () => {
  currentPage.value = 1
  finished.value = false
  loadLikedItems(true)
}

// 加载更多
const onLoad = () => {
  loadLikedItems()
}

// 加载点赞内容
const loadLikedItems = async (isRefresh = false) => {
  if (activeTab.value === 0) {
    // 加载点赞的文章
    await loadLikedArticles(isRefresh)
  } else {
    // 加载点赞的评论
    await loadLikedComments()
  }
}

// 加载点赞的文章
const loadLikedArticles = async (isRefresh = false) => {
  try {
    // 模拟加载数据
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    const mockData = Array(5).fill(0).map((_, index) => ({
      id: `article-${currentPage.value}-${index}`,
      title: `点赞文章标题 ${currentPage.value}-${index}`,
      summary: '这是一篇文章的摘要，介绍了主要内容和观点。这是一篇文章的摘要，介绍了主要内容和观点。',
      author: {
        id: `user-${index % 3 + 1}`,
        name: `作者${index % 3 + 1}`,
        avatar: `https://picsum.photos/id/${1000 + index % 5}/100/100`
      },
      views: Math.floor(Math.random() * 1000),
      likes: Math.floor(Math.random() * 200),
      cover: index % 2 === 0 ? `https://picsum.photos/id/${100 + index}/200/120` : undefined
    }))
    
    if (isRefresh) {
      likedArticles.value = mockData
    } else {
      likedArticles.value = [...likedArticles.value, ...mockData]
    }
    
    currentPage.value++
    finished.value = currentPage.value > 3
  } catch (error) {
    console.error('加载点赞文章失败:', error)
    showToast('加载失败，请重试')
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

// 加载点赞的评论
const loadLikedComments = async () => {
  try {
    // 模拟加载数据
    await new Promise(resolve => setTimeout(resolve, 500))
    
    likedComments.value = Array(8).fill(0).map((_, index) => ({
      id: `comment-${index}`,
      content: `这是一条评论内容，表达了对文章的看法和理解。这是一条评论内容，表达了对文章的看法和理解。${index}`,
      user: {
        id: `user-${index % 4 + 1}`,
        name: `评论者${index % 4 + 1}`,
        avatar: `https://picsum.photos/id/${1010 + index % 5}/100/100`
      },
      time: new Date(Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000).toISOString(),
      articleId: `article-id-${index % 5}`,
      articleTitle: `被评论的文章标题 ${index % 5}`
    }))
  } catch (error) {
    console.error('加载点赞评论失败:', error)
    showToast('加载失败，请重试')
  }
}

// 查看文章
const viewArticle = (id) => {
  router.push(`/blog/${id}`)
}

// 查看评论（跳转到对应文章并定位到评论）
const viewComment = (articleId, commentId) => {
  router.push({
    path: `/blog/${articleId}`,
    query: { comment: commentId }
  })
}

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  const now = new Date()
  const diffDays = Math.floor((now - date) / (24 * 60 * 60 * 1000))
  
  if (diffDays === 0) {
    return '今天'
  } else if (diffDays === 1) {
    return '昨天'
  } else if (diffDays < 7) {
    return `${diffDays}天前`
  } else {
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
  }
}

onMounted(() => {
  loadLikedItems()
})
</script>

<style lang="scss" scoped>
.my-likes-page {
  min-height: 100vh;
  background-color: var(--background-color);
  padding-bottom: calc(var(--tabbar-height) + 20px);
  
  .likes-tabs {
    --van-tabs-line-height: 44px;
    
    .like-list {
      padding: 8px 0;
      
      .like-item {
        display: flex;
        margin: 12px;
        padding: 12px;
        background-color: var(--background-color-light);
        border-radius: 8px;
        
        .item-cover {
          width: 80px;
          height: 80px;
          margin-right: 12px;
          border-radius: 4px;
          overflow: hidden;
          flex-shrink: 0;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        
        .item-content {
          flex: 1;
          overflow: hidden;
          
          .item-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 4px;
            line-height: 1.4;
            color: var(--text-color);
          }
          
          .item-summary {
            font-size: 14px;
            color: var(--text-color-secondary);
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .item-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: var(--text-color-tertiary);
            
            .author-info {
              display: flex;
              align-items: center;
              
              .author-avatar {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin-right: 4px;
              }
            }
            
            .stats-info {
              display: flex;
              
              .info-item {
                display: flex;
                align-items: center;
                margin-left: 12px;
                
                .van-icon {
                  margin-right: 2px;
                }
              }
            }
            
            .comment-time {
              font-size: 12px;
            }
          }
          
          .item-comment {
            font-size: 14px;
            color: var(--text-color);
            margin: 8px 0;
            line-height: 1.6;
          }
          
          .item-article-title {
            font-size: 12px;
            color: var(--text-color-secondary);
            margin-top: 8px;
          }
        }
        
        &.comment-item {
          flex-direction: column;
        }
      }
    }
  }
}
</style> 